<template>
	<div class="like">
		<div class="top">
			<div class="img">
				<img src="./../like.png" alt="">
			</div>
			<span>猜你喜欢</span>
		</div>
		<div class="content" v-for="item of likeList"  @click="godetails">
			<div class="left">
				<img :src="item.url" alt="">
				<div class="mask" v-if="item.mask">{{item.mask}}</div>
			</div>
			<div class="right">
				<h3>{{item.title}}</h3>
				<p>☆☆☆☆☆</p><span>{{item.say}}条评论</span>
				<div class="bottom">
					<span>￥<i>{{item.money}}</i></span>起
					<b>{{item.place}}</b>
				</div>
			</div>
		</div>
		<div class="foot">查看所有产品</div>
	</div>
</template>
<script>
	export default{
		props:["likeList"],
	 	methods:{
	 		godetails(){
	 			this.$router.push("/details")
	 		}
	 	},
		data(){
			return{
				// likeList:[
				// 	{
				// 		url:require("./../../../data/img/like/01.jpg"),
				// 		title:"秦岭野生动物园",
				// 		say:"10384",
				// 		money:"48",
				// 		place:"长安区",
				// 		mask:"可定明日"
				// 	},
				// 	{
				// 		url:require("./../../../data/img/like/02.jpg"),
				// 		title:"秦岭野生动物园",
				// 		say:"10384",
				// 		money:"48",
				// 		place:"长安区",
				// 		mask:"可定明日"
				// 	},
				// 	{
				// 		url:require("./../../../data/img/like/03.jpg"),
				// 		title:"秦岭野生动物园",
				// 		say:"10384",
				// 		money:"48",
				// 		place:"长安区",
				// 		mask:"可定明日"
				// 	},
				// 	{
				// 		url:require("./../../../data/img/like/04.jpg"),
				// 		title:"秦岭野生动物园",
				// 		say:"10384",
				// 		money:"48",
				// 		place:"长安区",
				// 		mask:"可定明日"
				// 	},
				// 	{
				// 		url:require("./../../../data/img/like/05.jpg"),
				// 		title:"秦岭野生动物园",
				// 		say:"10384",
				// 		money:"48",
				// 		place:"长安区",
				// 		mask:"可定明日"
				// 	},
				// 	{
				// 		url:require("./../../../data/img/like/06.jpg"),
				// 		title:"秦岭野生动物园",
				// 		say:"10384",
				// 		money:"48",
				// 		place:"长安区",
				// 		mask:"可定明日"
				// 	},
				// 	{
				// 		url:require("./../../../data/img/like/07.jpg"),
				// 		title:"秦岭野生动物园",
				// 		say:"10384",
				// 		money:"48",
				// 		place:"长安区",
				// 		mask:"可定明日"
				// 	}
				// ]
			}
		}
	}
</script>
<style scoped>
	.like{
		font-size: 0.32rem;
	}
	.like .top{
		padding:0.3rem;
	}
	.like .top .img{
		display: inline-block;
		width: 0.3rem;
		height: 0.3rem;
	}
	.like .top .img img{
		width: 100%;
		height: 100%;
	}
	.like .content{
		overflow:hidden;
		padding-bottom:0.2rem; 
		padding-top:0.2rem; 
		margin:0 0.24rem;
		border-bottom:1px solid #ddd;
	}
	/*.like .content:last-child{
		border:none;
		background: #;000
	}*/
	.like .content .left{
		width: 2rem;
		height: 2rem;
		float: left;
		padding-right: 0.3rem;
		position: relative;
	}
	.like .content .left img{
		width: 100%;
		height: 100%;
	}
	.like .content .left .mask{
		position: absolute;
		top:0;
		left:0;
		background: #00afc7;
		color:#fff;
		font-size: 0.2rem;
		padding:0.08rem;
		border-bottom-right-radius:0.3rem;
	}
	.like .content .right h3{
		padding:0.3rem 0;
	}
	.like .content .right p{
		display: inline-block;
		font-size: 0.18rem;
		vertical-align: top;
		padding-right: 0.1rem;
		color:#ffb436;
	}
	.like .content .right span{
		font-size: 0.2rem;
	}
	.like .content .right .bottom{
		padding-top: 0.3rem;
	}
	.like .content .right .bottom span{
		color:#ffb436;
	}
	.like .content .right .bottom span i{
		font-size: 0.4rem;
	}
	.like .content .right .bottom b{
		font-size: 0.2rem;
		text-align: right;
		float: right;
	}
	.like .foot{
		font-size: 0.28rem;
		text-align: center;
		padding:0.3rem 0;
		border-top:1px solid #ddd;
		color:#00afc7;
	}
</style>